<template>
  <div class="floor_container">
    <van-list
      v-model="loading"
      @load="onLoad"
      :finished="finished"
      finished-text="没有更多了"
    >
      <div
        class="floor"
        v-for="(fItem, index) in floorList"
        :key="fItem.kindId"
      >
        <!-- 头部区域 -->
        <div class="title-con">
          <span class="title">{{ fItem.name }}</span>
          <span class="enter">进入场景</span>
        </div>
        <!-- 内容图片区域 -->
        <van-grid
          class="temp-con"
          :column-num="
            fItem.templates[0].width == '90mm' ||
            fItem.templates[0].height == '500px'
              ? 2
              : 3
          "
          :border="false"
          gutter="0"
        >
          <van-grid-item
            class="temp-item"
            v-for="(item, index) in 6"
            :key="index"
          >
            <div
              @touchstart="gtouchstart(fItem.templates[index])"
              @touchmove="gtouchmove()"
              @touchend="showDeleteButton(fItem.templates[index])"
            >
              <van-image
                :src="fItem.templates[index].designTemplateImageUrl"
                alt=""
              >
                <template v-slot:loading>
                  <van-loading type="spinner" size="20" />
                </template>
              </van-image>
            </div>
          </van-grid-item>
        </van-grid>
        <!-- 下方按钮区域 -->
        <div class="btn-con">
          <div class="btn-item">更多</div>
          <div class="btn-item" @click="change(index)">换一批</div>
        </div>
      </div>
    </van-list>
    <van-overlay :show="show" @click="deleteShow">
      <div class="wrapper">
        <div class="block" @click.stop>
          <img src="" ref="img" class="img" />
          <div class="collect">
            <img src="./images/sc.png" alt="" />
          </div>
          <div class="test">收藏</div>
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
export default {
  name: "Floor",
  props: [],
  data() {
    return {
      floorList: [],
      page: 1,
      loading: true,
      finished: false,
      show: false,
    };
  },
  created() {
    this.getFloor(this.page);
  },
  methods: {
    // 获取电梯导航数据
    async getFloor(page) {
      const res = await this.$API.get(
        `/vv/mobile/main/getSceneDetail.do?page_no=${page}`
      );
      if (res.status !== 200) return this.$toast.fail("请求数据失败");
      res.data.body.data.sceneDetail.forEach((item) => (item.page = 1));
      this.floorList = this.floorList.concat(res.data.body.data.sceneDetail);
      this.page++;
      this.loading = false;
    },
    //上拉加载
    onLoad() {
      if (this.page > 4) {
        this.finished = true;
        return;
      }
      this.getFloor(this.page);
    },
    //点击图片进入详情
    goDetail(item) {
      this.$router.push({
        name: "detail",
        params: { id: item.designTemplateId },
      });
    },
    //换一换
    async change(index) {
      if (this.floorList[index].page * 6 >= this.floorList[index].totalCount)
        this.floorList[index].page = 0;
      this.floorList[index].page++;
      const che = await this.$API.get(
        `/api/designtemplate/getWxAppTemplateByKindId.do?_dataType=json&client_type=40&fid=0&sid=${this.floorList[index].kindId}&page_size=6&page_no=${this.floorList[index].page}&_dataClientType=3`
      );
      let url = "/pub" + che.data.body.cacheUrl.slice(27);
      const res = await this.$API.get(url);
      this.floorList[index].templates = res.data.body.templates;
    },
    //长按事件（起始）
    gtouchstart(item) {
      this.timer = setTimeout(() => {
        this.show = true;
        this.timer = 0;
        this.$refs.img.src = item.designTemplateImageUrl;
        document.body.style.overflow = "hidden";
      }, 1000);
      return false;
    },
    showDeleteButton(item) {
      clearTimeout(this.timer); //清除定时器
      if (this.timer != 0) {
        this.goDetail(item);
      }
      return false;
    },
    gtouchmove() {
      clearTimeout(this.timer); //清除定时器
      this.timer = 0;
    },
    deleteShow() {
      document.body.style.overflow = "";
      this.show = false;
      this.$emit("showMo", this.show);
    },
  },
};
</script>

<style lang="less" scoped>
.floor {
  .title-con {
    display: flex;
    justify-content: space-between;
    padding: 16px 12px 20px;

    .title {
      font-size: 16px;
      color: #000;
      font-weight: 600;
    }
    .enter {
      font-size: 12px;
    }
  }
  .temp-con {
    display: flex;
    padding: 0 8.1px;
    flex-wrap: wrap;

    .temp-item {
      flex: 30%;
      box-sizing: border-box;
      padding: 0 5px;
      margin-bottom: 10px;
      img {
        width: 100%;
      }
    }
  }
  .btn-con {
    display: flex;
    justify-content: space-around;
    .btn-item {
      width: 170px;
      line-height: 40px;
      text-align: center;
      background: #f3f4f9;
      border-radius: 20px;
      font-size: 13px;
    }
  }
}
.van-overlay {
  z-index: 99999;
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: rgba(255, 255, 255, 0.01);
    backdrop-filter: blur(3px);
    .block {
      width: 70%;
      text-align: center;
      .img {
        width: 100%;
      }
      .collect {
        width: 50px;
        height: 50px;
        margin: 20px auto;
        border-radius: 50%;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .test {
        color: #f3f4f9;
      }
    }
  }
}
</style>